<template>
  <div>
    <el-container>
      <el-header height="100%">
        <div class="mm-header">
          <a class="logo-mm" href="http://www.meituan.com">
          </a>
        </div>
      </el-header>
      <el-main>
        <div class="mm-conter">
          <el-row>
            <el-col :span="12">
              <div>
                <img src="//s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg" alt="">
              </div>
            </el-col>
            <el-col :span="8" :offset="2">
              <div class="loginbox">
                <span style="margin-left: 70px;margin-bottom: 10px;">账号登录</span>
                <el-form
                  :model="ruleForm"
                  :rules="rules"
                  ref="ruleForm"
                  label-width="70px"
                  >
                  <el-form-item label="昵称" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="pwd">
                    <el-input v-model="ruleForm.pwd" type="password"></el-input>
                    <span style="float: right">
                      <nuxt-link to="/forgetpwd">忘记密码?</nuxt-link>
                    </span>
                  </el-form-item>
                  <el-form-item >
                    <el-button type="primary" @click="login" style="width: 100%">
                      登录
                    </el-button>
                    <span>没有账号?
                      <el-button type="text">
                        <nuxt-link to="/rejister">
                          免费注册
                        </nuxt-link>
                      </el-button></span>
                    <div class="error">{{error}}</div>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer height="100%">
        <div class="footer-mm">
          <ul>
            <li class="firstli"><a class="afirst" rel="nofollow" href="https://about.meituan.com/about.html">关于美团</a></li>
            <li><a rel="nofollow" href="https://zhaopin.meituan.com/">加入我们</a></li>
            <li><a rel="nofollow" href="http://emis.meishi.meituan.com/merchantsSettled">商家入驻</a></li>
            <li><a rel="nofollow" href="https://www.meituan.com/help/faq">帮助中心</a></li>
            <li><a href="http://meituan.com/mobile">美团手机版</a></li>
          </ul>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import CryptoJS from 'crypto-js'
export default {
  layout: 'blank',
  data () {
    return {
      ruleForm: {
        email: '',
        pwd:''
      },
      error: '',
      rules: {
        username: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }],
        pwd:[{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    login () {
      console.log('login')
      console.log(this.ruleForm.password)
      console.log(CryptoJS.MD5(this.ruleForm.password).toString())
      this.$axios.post('http://localhost:3200/users/signin',{
        username: window.encodeURIComponent(this.ruleForm.username),
        password: CryptoJS.MD5(this.ruleForm.password).toString()
      }).then(({status,data}) =>{
        if (status === 200) {
          if (data && data.code === 0) {
            location.href = '/'
          } else {
            this.error = data.msg
          }
        } else {
          this.error = `服务器出错,错误代码${status}`
        }
        setTimeout(() => {
          that.error = ''
        }, 1500)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-header{
  background: #fff;
  color: #000;
  width: 100%;
  font-size: 16px;
}
  .logo-mm{
    margin: 0;
    width: 82px;
    height: 54px;
    background-position: -188px -808px;
    background-image: url(//s0.meituan.net/bs/file/?f=fe-sso-fs:build/assets/sp-normal.2ee5c09.png);
    background-repeat: no-repeat;
    background-size: initial;
    float: left;
    display: block;
    display: inline;
    text-indent: -9999px;
    overflow: hidden;
  }
  .mm-header{
    width: 980px;
    margin: 0 auto;
    height: auto;
    margin: 40px auto 30px;
  }
  .mm-conter{
    width: 980px;
    margin: 0 auto;
    margin: 30px auto 30px;
  }
  .loginbox{
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  }
  .footer-mm{
    width: 980px;
    margin: 0 auto;
    margin: 30px auto 30px;
  }
  li {
    list-style: none;
    float: left;
    margin-left: 0px;
  }
  li a {
    padding: 0px 10px;
    border-left: 1px solid #cccccc;
    color: #999999 !important;
  }
  .afirst{
    border-left: none;
    margin-left: 0px !important;
    padding-left: 0px;
  }
  ul {
    height: 20px;
    padding: 14px 0px;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    font-size: 14px;
  }
</style>
